<!DOCTYPE html>

<html>

    <head>

    <meta charset="UTF-8">

    <title>capture screen</title>

    </head>

    <body>

        <video id="video" controls="controls">

        <source src="../../img/视频-07.mp4">

        </video>

        <div id="output"></div>

        <script type="text/javascript">

//             (function() {

//             var video, output;

//             var scale = 3;

//             var initialize = function() {

//             output = document.getElementById("output");

//             video = document.getElementById("video");

//             video.addEventListener('loadeddata', captureImage);

//             };

//             var captureImage = function() {

//             var canvas = document.createElement("canvas");

//             canvas.width = video.videoWidth * scale;

//             canvas.height = video.videoHeight * scale;

//             canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

//             var img = document.createElement("img");

//             // img.src = canvas.toDataURL("image/png");

//             canvas.toBlob(function(blob) {
           
//                 img.src = URL.createObjectURL(blob);
//                 // img.src = url
// // imgsBlobArry[index].uer = window.URL.createObjectURL(blob)

// }, 'image/jpg', 0.95);

//             output.appendChild(img);

//             };

//             initialize();

//             })();




 function  getVideoBase64(url)  {
        return new Promise(function (resolve, reject) {
            let dataURL = '';
            let video = document.createElement("video");
            video.setAttribute('crossOrigin', 'anonymous');//处理跨域
            video.setAttribute('src', url);
            video.setAttribute('width', 400);
            video.setAttribute('height', 240);
            video.addEventListener('loadeddata', function () {
                let canvas = document.createElement("canvas"),
                    width = video.width, //canvas的尺寸和图片一样
                    height = video.height;
                canvas.width = width;
                canvas.height = height;
                canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
                dataURL = canvas.toDataURL('image/jpeg'); //转换为base64

                var img = document.createElement("img");
                img.src = dataURL;

                let output = document.getElementById("output");


                output.appendChild(img);
                resolve(dataURL);
            });
        })
    }

    getVideoBase64('../../img/tvc-v3_4138031.mp4').then(data=>{console.log(data)})

        </script>

    </body>

</html>